'use client'

import Image from "next/image"
import { useRouter } from "next/navigation"

import { useChatContextSelector } from "@/context/chat-context"

type AppCardProps = {
    id: string
    name: string
    type: string // 'Chatbot' | 'Text-Generate' | 'Agent' | 'Workflow'
    desc: string
    icon?: string
    greeting?: string
}

const AppCard = ({ id, name, type, icon, desc, greeting }: AppCardProps) => {
    const router = useRouter()
    const clearMessages = useChatContextSelector(state => state.clearMessages)

    const handleTrigger = () => {
        let link = `/ai/${type.toLowerCase()}/${id}`
        if (greeting) {
            link += `?greeting=${greeting}`
        }
        clearMessages()
        router.push(link)
    }

    return (
        <div
            className="rounded-md border shadow-sm hover:shadow-lg w-full h-40 flex flex-col p-2 space-y-2 cursor-pointer"
            onClick={handleTrigger}
        >
            <div className="flex items-center justify-between">
                <Image src={icon ?? '/images/tool.png'} alt='Icon' width={64} height={64} />
                <div className="flex-1 flex flex-col truncate">
                    <h3 className="font-bold text-[14px] truncate">{name}</h3>
                    <p className="text-[10px]">{type}</p>
                </div>
            </div>
            <p className="px-2 text-xs text-muted-foreground line-clamp-3">{desc}</p>
        </div>
    )
}

export default AppCard